<template>
  <div>
    <div class="box">测试0</div>
    <hr />
    <!-- 横线有没有都可以， bg-emerald 后面可以添加数值，代表颜色深度 -->
    <div
      class="m-6 w200 h-100 bg-emerald-600 text-30 text-white"
      bg="green-200 hover:green-300 dark:green-400 dark:hover:green-500"
    >
      测试1
    </div>
    <div class="box2">测试2</div>
    <div w100 h100 text-20 bg-amber mt10 py20>测试3</div>
    <!-- flex-center = flex items-center justify-center -->
    <div class="wrap" w200 h100 flex-center gap-10>
      <div w20 h20 bg-blue></div>
      <div w20 h20 bg-blue></div>
      <div w20 h20 bg-blue></div>
    </div>
    <div i-ep:chat-line-round></div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: brown;
}

.box2 {
  @apply m-5 w200 h-100 bg-emerald-600 text-30 text-white;
}

.wrap {
  border: 1px solid #333;
}
</style>
